

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <base href="http://odyniec.net/projects/imgareaselect/" />
    <meta content="IE=5" http-equiv="X-UA-Compatible" />
    <title>imgAreaSelect - image selection/cropping jQuery plugin - odyniec.net</title>
    
    
    <meta name="keywords" content="imgareaselect,javascript,jquery,plugin,image,area,select,crop,cropper,Michal Wojciechowski,odyniec" />
    
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="/css/google-code-prettify/prettify.css" />
    
    
    <link rel="stylesheet" type="text/css"
        href="http://odyniec.net/css/main.css" />
    
    
    
    <link rel="stylesheet" type="text/css"
        href="http://odyniec.net/themes/hench_blue/css/main.css" />
    
    
    
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    
    
    
    <link rel="stylesheet" type="text/css" href="css/imgareaselect-animated.css" />
    
    
    
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" media="screen" href="/css/msie/ie7.css" />
    <![endif]-->
    
  </head>

  <body >

	  <div id="root">
	    <div id="header">
	      <h1><a href="/">odyniec.net</a></h1>
	
	      <div id="nav">
            
 	        <ul>
	          
                <li>
            
                <a href="http://odyniec.net/about/">About</a>
              </li>
              
                <li>
            
                <a href="http://odyniec.net/blog/">Blog</a>
              </li>
	          
                <li class="active">
            
                <a href="http://odyniec.net/projects/">Projects</a>
              </li>
	          
                <li>
            
	            <a href="http://odyniec.net/writings/">Writings</a>
	          </li>
	          
                <li>
            
                <a href="http://odyniec.net/contact/">Contact</a>
              </li>
	        </ul>
	      </div> <!-- /#nav -->
	    </div> <!-- /#header -->
	    
	    <div id="content" class="container">
        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.imgareaselect.pack.js"></script>
<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);    
}

$(function () {
    $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});
</script>

<div class="container">

<!-- <div style="float: left; width: 592px; font-size: 105%;"> -->

<div id="quick-links">
  <img src="imgareaselect.jpg" alt="imgAreaSelect" />
  <br />
  <a class="button download" href="jquery.imgareaselect-0.9.8.zip">Download</a>
  <br />
  <a class="button examples" href="examples.html">Examples</a> 
  <br />
  <a class="button documentation" href="usage.html">Documentation</a> 
  <br />
  <a class="button faq" href="faq.html">FAQ</a> 
</div>

<div>

<h1>imgAreaSelect</h1>

<p>
  <b>imgAreaSelect</b> is a <a href="http://jquery.com/">jQuery</a>
  plugin for selecting a rectangular area of an image. It allows web developers
  to easily implement image cropping functionality, as well as other user
  interface features, such as photo notes (like those on
  <a href="http://flickr.com/">Flickr</a>).
</p>

<p style="margin-bottom: 0.4em;">
  Plugin features:
</p>

<ul class="features">
  <li>Highly configurable</li>
  <li>Customizable with CSS styling</li>
  <li>Handles scaled images</li>
  <li>Keyboard support for moving and resizing the selection</li>
  <li>Supports callback functions</li>
  <li>Provides API functions for easier integration with other application
    components</li>
  <li>Lightweight &mdash; the packed version is less than 8KB</li>
</ul>

<p>
  The plugin works in all major browsers, including Firefox 2+, Opera 9.5+,
  Google Chrome, Safari 3+, and Internet Explorer 6+.
</p>

</div>

</div>

<h2>Live Example</h2>

<div class="container demo">
  <div style="float: left; width: 50%;">
    <p class="instructions">
      Click and drag on the image to select an area. 
    </p>
 
    <div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
      <img id="photo" src="flower2.jpg" />
    </div>
  </div>
 
  <div style="float: left; width: 50%;">
    <p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
      Selection Preview
    </p>
  
    <div class="frame" 
      style="margin: 0 1em; width: 100px; height: 100px;">
      <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
        <img src="flower2.jpg" style="width: 100px; height: 100px;" />
      </div>
    </div>

    <table style="margin-top: 1em;">
      <thead>
        <tr>
          <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
            Coordinates
          </th>
          <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
            Dimensions
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
 		      <td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
 		      <td style="width: 20%;"><b>Width:</b></td>
   		    <td><input type="text" value="-" id="w" /></td>
        </tr>
        <tr>
          <td><b>Y<sub>1</sub>:</b></td>
          <td><input type="text" id="y1" value="-" /></td>
          <td><b>Height:</b></td>
          <td><input type="text" id="h" value="-" /></td>
        </tr>
        <tr>
          <td><b>X<sub>2</sub>:</b></td>
          <td><input type="text" id="x2" value="-" /></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td><b>Y<sub>2</sub>:</b></td>
          <td><input type="text" id="y2" value="-" /></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<p class="major">
  &raquo; <a href="examples.html">See more examples</a>
</p>

<h2>Quick Usage Instructions</h2>

<p>
  <a href="#download">Download</a> the plugin, unzip it, and copy the JavaScript
  and CSS files to your website/application directory. Load the files in
  the <code>&lt;head&gt;</code> section of your HTML document.
</p>


<pre class="prettyprint">&lt;head&gt;
  ...
<em>  &lt;link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /&gt;
  &lt;script type="text/javascript" src="scripts/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"&gt;&lt;/script&gt;</em>
  ...
&lt;/head&gt;</pre>


<p>
  Then, to enable selection on an image, wrap it in a jQuery object and call the
  <code>imgAreaSelect()</code> method:
</p>

<pre class="prettyprint">&lt;script type="text/javascript"&gt;
$(document).ready(function () {
<em>    $('img#photo').imgAreaSelect({
        handles: true,
        onSelectEnd: someFunction
    });</em>
});
&lt;/script&gt;</pre>

<p class="major">
  &raquo; <a href="usage.html">Read documentation</a>
</p>

<a name="download"></a>
<h2>Download</h2>

<p>
  <a href="jquery.imgareaselect-0.9.8.zip">jquery.imgareaselect-0.9.8.zip</a>
  &ndash; a zip archive containing the plugin source (packed version included),
  a minified version of jQuery, CSS and graphics files, and license text files.
</p>

<a name="for-developers"></a>
<h2>For Developers</h2>

<p>
 For web developers who want to extend/modify the plugin, here's a fully
 documented version of the source code:<br />
 <a href="jquery.imgareaselect.dev.js">jquery.imgareaselect.dev.js</a>
</p>

<a name="license"></a>
<h2>License</h2>

<p>
 Dual licensed under the MIT and GPL licenses.
</p>

<a name="links"></a>
<h2>Links</h2>
  
<p>
 <a href="http://plugins.jquery.com/project/imgAreaSelect">imgAreaSelect on jQuery Plugins</a>
</p>

<p>
 <a href="https://github.com/odyniec/imgareaselect">imgAreaSelect on GitHub</a>
</p>

<p>
 <a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/">PHP &amp; jQuery
  image upload and crop tutorial</a> at <a href="http://www.webmotionuk.co.uk/">WebMotionUK</a>
</p>

<p>
 <a href="http://www.leonkessler.com/blog/?p=132">Using imgAreaSelect and GD
  library to crop and create thumbnails</a> at
  <a href="http://www.leonkessler.com/blog/">Leon Kessler's blog</a>
</p>

<p>
 <a href="http://keithics.com/blog/jquery/ajaxcrop-jquery-and-php-crop-tool">AjaxCrop
  – Jquery and PHP Crop tool</a> at
  <a href="http://keithics.com/blog/">Keith Levi Lumanog's blog</a>
</p>

	    </div> <!-- /#content -->
	    
	    <div id="footer">
	      <p class="copyright">
	        &copy; 2001-2012 Michał Wojciechowski
	      </p>
          <p class="information">
            Powered by <a href="http://perldancer.org/">Perl Dancer</a>
            and <a href="http://wordpress.org/">WordPress</a>
          </p>
	    </div> <!-- /#footer -->
	  </div> <!-- /#root -->
  </body>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3683332-2");
pageTracker._initData();
pageTracker._trackPageview();
</script></html>

